<template>
  <div class="head">
    <el-col type="flex" align="left" :span="4">
      <div>血液检测</div>
    </el-col>
    <el-col :span="4" class="tip">设备总数：{{ count.total }}</el-col>
    <el-col :span="12" class="tip">在线总数：{{ count.onLineTotal }}</el-col>

    <el-col :span="4" type="flex"
      ><div>
        设备列表：<el-select
          v-model="value"
          placeholder="请选择"
          @change="change"
        >
          <el-option
            v-for="(item, index) in options"
            :key="item.deviceName"
            :label="item.deviceName"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>
    </el-col>
    <el-col :span="4" type="flex"></el-col>
  </div>
</template>

<script>
export default {
  name: "Head",
  comments: {},
  props: ["deviceList"],
  data() {
    return {
      options: [],
      count: {},
      value: 0,
    };
  },
  methods: {
    change(item) {
      console.log(item);
      this.$emit("deviceChange", item);
    },
  },
  created() {
    this.$http.get("/v1/deviceInfo/count").then((res) => {
      this.count = res.data;
    });

    this.$http.get("/v1/deviceInfo/list").then((res) => {
      console.log("res", res);
      this.options = res.data;
    });
  },
};
</script>

<style>
.head {
  height: 60px;
  line-height: 60px;
  background-color: #000000;
  color: #fff;
  padding: 0 20px;
}
</style>